<template>
  <div id="asset-management" class="component-wrap">
    <div class="title">
      <div class="title-content">
        <img src="../assets/ic_titlebar_back@3x.png" class="title-back" @click="goBack"/>
        <h2>资产入库</h2>
        <img src="../assets/ic_titlebar_scan@3x.png" class="title-scan"/>
        <img src="../assets/ic_titlebar_search@3x.png" class="title-search"/>
      </div>
    </div>
    <div class="asset-detail-content">
      <div class="basic-info">
        <h2>基本信息</h2>
        <table>
          <tr>
            <td>所在位置：</td>
            <td @click="goPlace">{{this.placedata}}</td>
            <img src="../assets/arrow_right@3x.png" alt="">
          </tr>
          <tr>
            <td>供应商：</td>
            <td><input type="text" placeholder="请输入供应商"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>品牌：</td>
            <td><input type="text" placeholder="请输入资品牌"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>规格型号：</td>
            <td><input type="text" placeholder="请输入规格型号"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>数量：</td>
            <td><input type="text" placeholder="请输入数量"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>计量单位：</td>
            <td @click="goUnit">请选择计量单位</td>
            <img src="../assets/arrow_right@3x.png" alt="">
          </tr>
          <tr>
            <td>购置日期：</td>
            <td @click="showData">{{this.buydata}}</td>
            <img src="../assets/arrow_right@3x.png" alt="">
          </tr>
        </table>
      </div>
      <div class="basic-info">
        <h2>自定义属性</h2>
        <table>
          <tr>
            <td>自定义属性1</td>
            <td><input type="text" placeholder="请输入自定义属性"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>自定义属性2</td>
            <td><input type="text" placeholder="请输入自定义属性"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
          <tr>
            <td>自定义属性3</td>
            <td><input type="text" placeholder="请输入自定义属性"></td>
            <div style="width:2rem;height:2rem;"></div>
          </tr>
        </table>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :overlay="true">
      <van-datetime-picker
        v-model="currentDate"
        type="data"
        :formatter="formatter"
        @confirm="Confirm()"
        @cancel="Cancel"
      />
    </van-popup>
  </div>
</template>

<script>;
    export default {
      name: "Compile",
      data(){
        return{
          currentDate: new Date(),
          show: false,
          buydata:'请选择购置日期',
          placedata:'请选择位置'
        }
      },
      mounted(){

      },
      methods: {
        goBack:function(){
          this.$router.go(-1);
        },
        formatter(type, value) {
          if (type === 'year') {
            return `${value}年`;
          } else if (type === 'month') {
            return `${value}月`
          }else if(type === 'day'){
            return `${value}日`
          }
          return value;
        },
        Confirm(){
          this.show = !this.show;
          var date = this.currentDate;

          var month = date.getMonth() + 1;
          var day = date.getDate() ;
          var hour = date.getHours();
          var minute = date.getMinutes()
          this.buydata = month + `月` + day + `日` + hour + `时` + minute + `分`;
        },
        Cancel(){
          this.show = !this.show;
        },
        showData(){
          this.show = !this.show;
        },
        goPlace(){
          this.$router.push({path:'/home/place'})
        },
        goUnit(){
          this.$router.push({path:'/home/unit'})
        }
      }
    }
</script>

<style scoped>
  .asset-detail-content{
    margin-top:5rem;
  }
  .basic-info{
    background:#FFFFFF;
  }
  .basic-info h2{
    font-size: 1.4rem;
    color: #171717;
    letter-spacing: 0.32px;
    border-left: 0.2rem solid #0CC;
    padding-left: 0.5rem;
    margin: 0.8rem 0 0.8rem 1.5rem;
  }
  .basic-info table {
    width: 90%;
    margin:0 auto;
  }
  .basic-info table tr {
    height: 4.7rem;
    line-height: 4.7rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
    border-bottom:0.5px solid #EEEEEE;
  }
  .basic-info table tr td:nth-of-type(1){
    color: #171717;

  }
  .basic-info table tr td:nth-of-type(2){
    color: #999999;
    text-align: right;
  }
  .basic-info table tr td:nth-of-type(2) input{
    text-align: right;
    border:none;
    color:#999999;
  }
  .basic-info table tr img{
    width:2rem;
    height:2rem;
  }
  .footdata{
    width:100%;
    position:fixed;
    bottom:0;
    z-index:3;
  }
</style>
